<template>
  <div class="m-box">
    <div class=" left-box">
      <div class="sh-box">
        <div class="title-box">
          <img src="~@img/project/icon-xmgl.png" alt="" />
          <span>太原市项目概览</span>
        </div>
        <ul class="project-list">
          <li
            @click="
              $router.push({
                name: 'infoaccountbook',
                query: { project_type: 1 },
              })
            "
            style="cursor:pointer"
          >
            <img src="~@img/project/icon-xmgl-01.png" alt="" />
            <p class="title">招引项目</p>
            <p class="num">
              <span>{{ projectNums.project1_obj }}</span
              >个
            </p>
          </li>

          <li
            @click="
              $router.push({
                name: 'infoaccountbook',
                query: { project_type: 2 },
              })
            "
            style="cursor:pointer"
          >
            <img src="~@img/project/icon-xmgl-02.png" alt="" />
            <p class="title">洽谈项目</p>
            <p class="num">
              <span>{{ projectNums.project2_obj }}</span
              >个
            </p>
          </li>
          <li
            @click="
              $router.push({
                name: 'infoaccountbook',
                query: { project_type: 3 },
              })
            "
            style="cursor:pointer"
          >
            <img src="~@img/project/icon-xmgl-03.png" alt="" />
            <p class="title">签约项目</p>
            <p class="num">
              <span>{{ projectNums.project3_obj }}</span
              >个
            </p>
          </li>
          <li
            @click="
              $router.push({
                name: 'projectaccountbook',
                query: { project_type: 4 },
              })
            "
            style="cursor:pointer"
          >
            <img src="~@img/project/icon-xmgl-04.png" alt="" />
            <p class="title">开工项目</p>
            <p class="num">
              <span>{{ projectNums.project4_obj }}</span
              >个
            </p>
          </li>
          <li
            @click="
              $router.push({
                name: 'projectaccountbook',
                query: { project_type: 5 },
              })
            "
            style="cursor:pointer"
          >
            <img src="~@img/project/icon-xmgl-05.png" alt="" />
            <p class="title">投产项目</p>
            <p class="num">
              <span>{{ projectNums.project5_obj }}</span
              >个
            </p>
          </li>
        </ul>
      </div>
      <div class="sh-box chart-box">
        <div class="chart-map">
          <div
            :class="['ty', district == '' ? 'active' : '']"
            @click="changeActiveDistrict"
          >
            太原市总览
          </div>
          <div class="chart-self" ref="chartMap"></div>
        </div>
        <div>
          <div class="title-box">
            <img src="~@img/project/icon-jdtjt.png" alt="" />
            <span>
              {{ district == "" ? "太原市" : district }}项目阶段统计图</span
            >
          </div>
          <div class="chart-pie">
            <div class="chart-self" ref="chartPie"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="sh-box">
      <div class="title-box">
        <img src="~@img/project/icon-phb.png" alt="" />
        <span> 太原市各县（市、区、开发区） 分数排行磅</span>
      </div>
      <table>
        <tr>
          <th width="120">排名</th>
          <th>县（市、区、开发区）</th>
          <th width="120">分数</th>
        </tr>

        <tr v-for="(item, index) of tableData" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.district_name }}</td>
          <td>{{ item.total_district_score }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import ty from "@map/ty-index.json";
import dotActive from "@img/public/icon-dot-active.png";
import dotNormal from "@img/public/icon-dot-normal.png";
import { Overview, ProjectMap, ScoreRank } from "@api/project";
export default {
  data() {
    return {
      district: "",
      chartMap: null,
      chartPie: null,
      projectNums: {},
      tableData: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap();
      this.initPie();
      this.getProjectNums();
      this.getProjectMap();
      this.getScoreRank();
      this.upDataPie([
        {
          name: "招引项目",
          value: 22,
        },
        {
          name: "洽谈项目",
          value: 8,
        },
        {
          name: "签约项目",
          value: 16,
        },
        {
          name: "开工项目",
          value: 26,
        },
        {
          name: "投产项目",
          value: 28,
        },
      ]);
    });
  },
  methods: {
    async getScoreRank() {
      let res = await ScoreRank({ flag: 2 });
      if (res.code && res.code != 0) {
      } else {
        this.tableData = res;
      }
    },
    async getProjectNums() {
      let res = await Overview({ project_type: "" });
      if (res.code && res.code != 0) {
        this.projectNums = {
          project1_obj: 0,
          project2_obj: 0,
          project3_obj: 0,
          project4_obj: 0,
          project5_obj: 0,
        };
      } else {
        this.projectNums = res;
      }
    },
    async getProjectMap() {
      let res = await ProjectMap({
        district_name: this.district,
      });
      if (res.code && res.code != 0) {
        this.upDataPie([
          {
            name: "招引项目",
            value: 0,
          },
          {
            name: "洽谈项目",
            value: 0,
          },
          {
            name: "签约项目",
            value: 0,
          },
          {
            name: "开工项目",
            value: 0,
          },
          {
            name: "投产项目",
            value: 0,
          },
        ]);
      } else {
        let max = 0;
        let mapData = [];
        let dotData = [];
        if (this.district == "") {
          for (let i in res[0]) {
            max = res[0][i] > max ? res[0][i] : max;
            if (i == "中北高新区") {
              dotData.push({
                name: "中北高新区",
                value: [112.570721979812, 37.9718734652464, res[0][i]],
              });
            } else if (i == "清徐开发区") {
              dotData.push({
                name: "清徐开发区",
                value: [112.365286246971, 37.6133580518845, res[0][i]],
              });
            } else if (i == "阳曲示范区") {
              dotData.push({
                name: "阳曲示范区",
                value: [112.679409, 38.064621, res[0][i]],
              });
            } else if (i == "西山示范区") {
              dotData.push({
                name: "西山示范区",
                value: [112.526291497339, 37.872764219517, res[0][i]],
              });
            } else {
              mapData.push({
                name: i,
                value: res[0][i],
              });
            }
          }
          this.chartMap.setOption({
            visualMap: {
              max,
            },
            series: [
              {
                data: mapData,
              },
              {
                data: dotData,
              },
            ],
          });
          this.upDataPie([
            {
              name: "招引项目",
              value: res[1].project1_obj_rate,
            },
            {
              name: "洽谈项目",
              value: res[1].project2_obj_rate,
            },
            {
              name: "签约项目",
              value: res[1].project3_obj_rate,
            },
            {
              name: "开工项目",
              value: res[1].project4_obj_rate,
            },
            {
              name: "投产项目",
              value: res[1].project5_obj_rate,
            },
          ]);
          this.chartMap.dispatchAction({
            type: "downplay",
            seriesName: "开发区",
          });
          this.chartMap.dispatchAction({
            type: "downplay",
            seriesName: "行政区",
          });
          this.chartMap.dispatchAction({
            type: "unselect",
            seriesName: "开发区",
          });
          this.chartMap.dispatchAction({
            type: "unselect",
            seriesName: "行政区",
          });
        } else {
          if (res[0] == undefined) {
            res[0] = {
              project1_obj_rate: 0,
              project2_obj_rate: 0,
              project3_obj_rate: 0,
              project4_obj_rate: 0,
              project5_obj_rate: 0,
            };
          }
          this.upDataPie([
            {
              name: "招引项目",
              value: res[0].project1_obj_rate || 0,
            },
            {
              name: "洽谈项目",
              value: res[0].project2_obj_rate || 0,
            },
            {
              name: "签约项目",
              value: res[0].project3_obj_rate || 0,
            },
            {
              name: "开工项目",
              value: res[0].project4_obj_rate || 0,
            },
            {
              name: "投产项目",
              value: res[0].project5_obj_rate || 0,
            },
          ]);
        }
      }
    },
    changeActiveDistrict() {
      this.district = "";
      this.getProjectMap();
    },
    // 后期改为热力图
    initMap() {
      this.chartMap = this.$echarts.init(this.$refs.chartMap);
      this.$echarts.registerMap("ty", ty);
      const initOption = {
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            return (
              params.marker +
              " " +
              params.name +
              " ： " +
              (params.componentSubType == "scatter"
                ? params.data.value[2]
                : params.data.value) +
              "个项目"
            );
          },
        },
        geo: {
          type: "map",
          map: "ty",
          zoom: 1.2,
          geoIndex: 0,
          selectedMode: "single",
          label: {
            show: true,
            color: "rgba(255,255,255,.9)",
            textBorderColor: "#e28157",
            textBorderWidth: 1,
            formatter: function(params) {
              return "{normalIcon|}" + " " + params.name;
            },
            rich: {
              normalIcon: {
                backgroundColor: {
                  image: dotNormal,
                },
              },
              activeIcon: {
                backgroundColor: {
                  image: dotActive,
                },
              },
            },
            fontSize: 16,
          },
          itemStyle: {
            areaColor: "#2953a8",
            borderColor: "#FFFFFF",
            borderWidth: 1,
          },
          select: {
            itemStyle: {
              areaColor: "#eac134",
              color: "#eac134",
            },
            label: {
              show: true,
              color: "rgba(255,255,255)",
              textBorderColor: "#e28157",
              textBorderWidth: 1,
            },
          },
          emphasis: {
            label: {
              show: true,
              color: "rgba(255,255,255)",
              textBorderColor: "#2953a8",
              textBorderWidth: 1,
              formatter: function(params) {
                //标签内容
                return "{activeIcon|}" + " " + params.name;
              },
            },
            itemStyle: {
              areaColor: "#eac134",
              label: {
                show: true,
                color: "#fff",
              },
              borderWidth: 0,
            },
          },
        },
        visualMap: [
          {
            show: true,
            // seriesIndex: 0,
            min: 0,
            max: 10,
            // top: 10,
            color: ["#d73027", "#f46d43", "#fdae61"],
          },
        ],
        series: [
          {
            name: "行政区",
            type: "map",
            map: "ty",
            geoIndex: 0,
            animation: false,
            label: {
              position: "right",
              offset: [30, 40],
            },
            data: [],
          },
          {
            name: "开发区",
            type: "scatter",
            coordinateSystem: "geo",

            symbolSize: function(val) {
              return 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              show: true,
              // formatter: "  {b}",
              position: "right",
              color: "rgba(255,255,255,0.9)",
              textBorderColor: "#e28157",
              textBorderWidth: 1,
              fontSize: 14,
              formatter: function(params) {
                //标签内容
                return params.name;
              },
            },
            select: {
              itemStyle: {
                color: "rgba(255,255,255)",
              },
              label: {
                show: true,
                color: "rgba(255,255,255)",
                textBorderColor: "#e28157",
                textBorderWidth: 1,
                formatter: function(params) {
                  //标签内容
                  return params.name;
                },
              },
            },
            itemStyle: {
              color: "rgba(255,255,255, 0.67)",
              shadowBlur: 10,
              shadowColor: " rgba(255,255,255, 0.2)",
            },
            emphasis: {
              label: {
                show: true,
                show: true,
                color: "rgba(255,255,255)",
                textBorderColor: "#e28157",
                textBorderWidth: 1,

                formatter: function(params) {
                  //标签内容
                  return params.name;
                },
              },
              itemStyle: {
                color: "rgba(255,255,255)",
                shadowBlur: 10,
                shadowColor: " rgba(255,255,255, 0.2)",
              },
            },
            selectedMode: "single",
            zlevel: 1,
          },
        ],
      };
      this.chartMap.setOption(initOption);
      // 地图点击事件
      this.chartMap.on("click", (item) => {
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "开发区",
        });
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "行政区",
        });
        if (this.district == item.name) {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: item.dataIndex,
          });
          return;
        }
        this.district = item.name;
        this.getProjectMap();
        if (item.componentSubType == "scatter") {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "开发区",
            dataIndex: item.dataIndex,
          });
        }
        if (item.componentSubType == "map") {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "行政区",
            dataIndex: item.dataIndex,
          });
        }
        this.$message({
          message: "成功切换至" + item.name,
          type: "success",
        });
      });
    },
    initPie() {
      this.chartPie = this.$echarts.init(this.$refs.chartPie);
      const initOption = {
        color: ["#fb3878", "#fdbe24", "#3ed8be", "#619bfb", "#8c3def"],
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            return (
              params.marker +
              " " +
              params.name +
              " ： " +
              params.data.value +
              "个项目"
            );
          },
        },
        legend: [
          {
            x: "0%",
            y: "84%",
            itemGap: 10,
            textStyle: {
              fontSize: 14,
              color: "#333",
            },
            data: ["招引项目"],
          },
          {
            x: "35%",
            y: "84%",
            itemGap: 10,
            textStyle: {
              fontSize: 14,
              color: "#333",
            },
            data: ["洽谈项目"],
          },
          {
            x: "70%",
            y: "84%",
            itemGap: 10,
            textStyle: {
              fontSize: 14,
              color: "#333",
            },
            data: ["签约项目"],
          },
          {
            x: "20%",
            y: "92%",
            itemGap: 10,
            textStyle: {
              fontSize: 14,
              color: "#333",
            },
            data: ["开工项目"],
          },
          {
            x: "55%",
            y: "92%",
            itemGap: 10,
            textStyle: {
              fontSize: 14,
              color: "#333",
            },
            data: ["投产项目"],
          },
        ],

        series: [
          {
            type: "pie",
            center: ["50%", "45%"],
            radius: ["40px", "100px"],
            labelLine: {
              show: true,
              length: 15,
              length2: 35,
              smooth: false,
              showAbove: true,
              lineStyle: { cap: "round" },
            },
            label: {
              formatter: "{a|{c}个 {d}%}\n{hr|}",
              //折线图文字颜色
              color: "#fffdef",
              rich: {
                //圆点位置大小配置
                hr: {
                  //auto自定义
                  backgroundColor: "inherit",
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12],
                },
                a: {
                  padding: [0, -30, -10, -30],
                },
              },
              color: "#fff",
            },
            zoom: 0.8,
            selectedMode: "single",
          },
        ],
      };
      this.chartPie.setOption(initOption);
      this.chartPie.on("legendselectchanged", function(obj) {
        const { selected, name } = obj;
        selected[name] = true;
        let option = {
          legend: {
            selected: selected,
          },
        };
        this.setOption(option);
        this.dispatchAction({
          type: "legendSelect",
          name: name,
        });
      });
    },
    upDataPie(data) {
      let option = {
        series: [
          {
            data: data,
          },
        ],
      };
      this.chartPie.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.m-box {
  padding: 30px 20px;
  display: grid;
  grid-template-columns: 980px 1fr;
  grid-column-gap: 20px;

  .left-box {
    display: grid;
    grid-template-rows: 270px 1fr;
    grid-row-gap: 20px;
  }
  .chart-box {
    display: grid;
    grid-template-columns: 580px 1fr;
    grid-column-gap: 20px;
  }
}
.title-box {
  cursor: default;
  img {
    vertical-align: middle;
    margin-right: 10px;
  }
  span {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    vertical-align: middle;
  }
}
.sh-box {
  padding: 30px;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
  border-radius: 10px;
  text-align: left;
}
.project-list {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  li {
    padding: 30px;
    width: 168px;
    height: 174px;
    cursor: default;
    img {
      width: 47px;
      height: 47px;
    }
    .title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #666666;
      margin-top: 5px;
    }
    .num {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      span {
        font-size: 36px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        margin-right: 10px;
        vertical-align: sub;
      }
    }
    &:nth-of-type(1) {
      background: url("~@img/project/bg-xmgl-01.png") no-repeat;
      background-size: 168px 174px;
      span {
        color: #ff7272;
      }
    }
    &:nth-of-type(2) {
      background: url("~@img/project/bg-xmgl-02.png") no-repeat;
      background-size: 168px 174px;
      span {
        color: #ffaf36;
      }
    }
    &:nth-of-type(3) {
      background: url("~@img/project/bg-xmgl-03.png") no-repeat;
      background-size: 168px 174px;
      span {
        color: #17d0b1;
      }
    }
    &:nth-of-type(4) {
      background: url("~@img/project/bg-xmgl-04.png") no-repeat;
      background-size: 168px 174px;
      span {
        color: #78a3ff;
      }
    }
    &:nth-of-type(5) {
      background: url("~@img/project/bg-xmgl-05.png") no-repeat;
      background-size: 168px 174px;
      span {
        color: #9155dc;
      }
    }
  }
}
table {
  margin-top: 24px;
  width: 100%;
  text-align: center;
  tr {
    border-top: 6px solid #fff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    cursor: default;

    th {
      height: 42px;
      background: #f5f6f7;
      border-right: 4px solid #fff;
      &:last-of-type {
        border-right: 0;
      }
    }
    td {
      height: 42px;
      background: rgba(245, 246, 248, 0.6);

      &:first-of-type {
        font-weight: bold;
        color: #446db3;
      }
      &:last-of-type {
        font-weight: bold;
      }
    }
    &:nth-of-type(odd) {
      background: #f5f6f7;
    }
  }
}
.chart-map {
  width: 100%;
  height: 100%;
  position: relative;
}
.chart-pie {
  width: 100%;
  height: calc(100% - 27px);
}
.chart-self {
  width: 100%;
  height: 100%;
}
.ty {
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -60px;
  width: 120px;
  height: 34px;
  line-height: 32px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fff;
  border: 1px solid #dc585d;
  background: #dc585d;
  border-radius: 5px;
  text-align: center;
  cursor: default;
  z-index: 999;
  opacity: 0.6;
}
.ty.active {
  opacity: 1;
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .m-box {
    grid-template-columns: 922px 1fr;
  }
  .title-box span {
    font-size: 14px;
  }
  table tr {
    border-top: 6px solid #fff;
    font-size: 16px;
  }

  .project-list li {
    transform: scale(0.95);
    -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -o-transform: scale(0.95);
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .m-box {
    width: 1500px;
    height: 840px;
    transform: scale(0.79);
    -moz-transform: scale(0.79);
    -webkit-transform: scale(0.79);
    -o-transform: scale(0.79);
    transform-origin: 0 0;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .m-box {
    width: 1400px;
    height: 940px;
    transform: scale(0.79);
    -moz-transform: scale(0.79);
    -webkit-transform: scale(0.79);
    -o-transform: scale(0.79);
    transform-origin: 0 0;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .m-box {
    width: 100%;
    height: auto;
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform-origin: 0 0;
  }
  .m-box {
    grid-template-columns: none;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: 20px;
    padding-right: 20px;
    overflow: auto;
    scrollbar-color: #767ffe #e9f3ff;
    scrollbar-width: 6px;
    scrollbar-width: thin;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: linear-gradient(0deg, #767ffe, #79aefe);
    }
    &::-webkit-scrollbar-track {
      background: #e9f3ff;
      border-radius: 10px;
    }
  }
  .m-box .left-box {
    grid-template-rows: 270px 400px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .sh-box {
    padding: 20px;
  }
  .m-box[data-v-a8379a98] {
    transform: scale(0.96);
    -moz-transform: scale(0.96);
    -webkit-transform: scale(0.96);
    -o-transform: scale(0.96);
    transform-origin: 0 0;
    height: 700px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .m-box[data-v-a8379a98] {
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform-origin: 0 0;
    height: 780px;
  }
}
</style>
